<template>
  <div class="bar" style="height:350px;width:450px"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme

export default {
  props: ['numberData','type'],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'bar')
      console.log(this.numberData)
         let nameArr=[],valueArr=[]
      this.numberData.forEach((item,index) => {
          nameArr[index]=item.name
          valueArr[index]=item.value
      });
      let obj
      if(this.type){
          obj = {
            xAxis: {
                type: 'value',
                
            },
            yAxis: {
                type: 'category',
                data: nameArr
            },
            grid: {
                bottom: '25%',
                top: '15%',
                left: '10%',
            },
            series: [{
                data: valueArr,
                type: 'bar'
            }]
        }
      }else{
          obj = {
            xAxis: {
                type: 'category',
                data: nameArr
            },
            yAxis: {
                type: 'value'
            },
            grid: {
            bottom: '25%',
            top: '15%',
            left: '10%',
        },
            series: [{
                data: valueArr,
                type: 'bar'
            }]
        }
      }
      this.chart.setOption(obj)
    }
  }
}
</script>
